<template>
	<view class="container">
		<scroll-view class="sroll-content" scroll-y="true">
			<view class="section">
				<text class="section-title">泉州风光</text>
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
				<swiper-item v-for="(item,index) in swiperlist" :key="index">
					<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
			</view>
			<view class="jiesao">
				<text class="section-title">泉州介绍</text>
				<text class="section-title2">海上丝绸之路起点 - 泉州</text>
				<text class="a"><text class="b">历史文化：</text>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</text>
				<text class="a"><text class="b">著名景点：</text>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
				<text class="a"><text class="b">特色文化：</text>拥有<text style="color: #428AF6;">南音</text>、<text  style="color: #428AF6;">木偶戏</text>和<text style="color: #428AF6;">闽南建筑</text>等丰富的非物质文化遗产。</text>

			</view>
			<view class="tansuo">
			
			<text class="section-title">探索进度</text>
			 <text class="a">当前进度: {{ progress }}%</text>
			        <slider value="60"  min="0" max="100" show-value=""></slider>
			</view>
			<view class="picker">
				<text class="section-title">选择城市</text>
				<view class="c">
					当前选择：福建省-泉州市-丰泽区
				</view>
			</view>
			<view class="xuanchuan">
				<text class="section-title">泉州宣传</text>
				<view class="d">
				<video id="video " src="/static/city-video.mp4" controls="true" poster="/static/video-poster.jpg" ></video>
				
			
				</view>
				<view class="mp">
					<text class="section-title">泉州背景音乐</text>
					<view class="f">
						<button class="but" @click="get">{{ isPlaying ? '停止' : '播放' }}</button>
						<text class="nanyin">泉州南音-泉州传统乐团</text>
						
					</view>
				</view>
				</view>
				 <view class="settings-container">
				    <!-- 出行方式选择 -->
					<text class="section-title">偏好设置</text>
				    <view class="setting-item">
				      <text class="label">出行方式:</text>
				      <radio-group @change="handleTransportChange">
				        <label class="radio-label">
				          <radio value="bus" :checked="transport === 'bus'"></radio>
				          <text>公交</text>
				        </label>
				        <label class="radio-label">
				          <radio value="drive" :checked="transport === 'drive'"></radio>
				          <text>自驾</text>
				        </label>
				        <label class="radio-label">
				          <radio value="walk" :checked="transport === 'walk'"></radio>
				          <text>步行</text>
				        </label>
				      </radio-group>
				    </view>
				    <!-- 显示推荐景点开关 -->
				    <view class="setting-item">
				      <text class="label">显示推荐景点:</text>
				      <switch v-model="showRecommendSpots"></switch>
				    </view>
				    <!-- 搜索半径设置 -->
				    <view class="setting-item">
				      <text class="label">搜索半径:</text>
				      <view class="radius-value">{{radius}}km</view>
				      <slider v-model="radius" :min="1" :max="50" :step="1"></slider>
				    </view>
				  </view>
		</scroll-view>
	</view>
	 
</template>

<script>
	
	export default {
		data() {
			return {
			 
				   swiperlist: [
				         { image: '/static/city1.png' },
				            { image: '/static/city2.jpg' },
				            { image: '/static/city3.jpg' },
				            { image: '/static/city4.jpg' },
							{ image: '/static/city5.jpg' }
							
				      ],
					 progress: 60,
					 multiArray:[
						 ['亚洲','欧洲'],
						 ['中国','日本'],
						 ['北京','上海','广州']
					 ],
					multiIndex:[0,0,0],
					  transport: 'bus', // 出行方式，默认公交
					      showRecommendSpots: true, // 是否显示推荐景点，默认显示
					      radius: 10 // 搜索半径，默认 10km
			}
		},
		onLoad() {
 
        console.log(this.swiperlist); // 打印数组，检查路径
    
		},
		methods: {
			 initAudio() {
			            // 创建音频上下文实例
			            this.audioContext = uni.createInnerAudioContext(); 
			            // 替换为有效的音频文件地址
			            this.audioContext.src = '/static/city-video.mp3';
			            // 关闭自动播放
			            this.audioContext.autoplay = false; 
			        },
			get(e){
				  if (!this.audioContext) {
				                 // 如果音频上下文未创建，先初始化
				                 this.initAudio(); 
				             }
				             if (this.isPlaying) {
				                 // 如果正在播放，停止音频
				                 this.audioContext.stop(); 
				             } else {
				                 // 如果未播放，播放音频
				                 this.audioContext.play(); 
				             }
				             // 切换播放状态
				             this.isPlaying = !this.isPlaying; 
			}
		},
		onUnload() { 
		        if (this.audioContext) {
		            this.audioContext.destroy();
		        }
		    },
			 handleTransportChange(e) {
			      this.transport = e.detail.value;
			      console.log('选择的出行方式:', this.transport);
			    }
	}
</script>


<style>
.section{
	font-size: 20px;
	border-style:solid;
			margin: 20px 20rpx 10px 20rpx;
			border-color: ghostwhite;
			border-width: 8rpx;
			border-radius: 16rpx;
			padding: 20px 0px;
}	

.swiper {
padding: 10px;
}

.swiper-image {
	border-radius: 16rpx;
	
    width:100%;
    height: 100%;
}
.section-title{
	font-weight: bold;
	
	margin: 10px;
	
}
.jiesao{
	display: flex;
	flex-direction:column;
	border-style:solid;
	font-size: 20px;
			margin: 10rpx 20rpx;
			border-color: ghostwhite;
			border-width: 8rpx;
			border-radius: 16rpx;
			padding: 20px 0px;
	
}
.section-title2{
	font-weight: bold;
	font-size: 18px;
	margin: 10px;
	
}
.a{
	margin: 5px 10px;
	font-size: 15px;
	color: gray;

}
.b{
	font-weight: bold;
}
.tansuo{
	display: flex;
	flex-direction:column;
	border-style:solid;
	font-size: 20px;
			margin: 10rpx 20rpx;
			border-color: ghostwhite;
			border-width: 8rpx;
			border-radius: 16rpx;
			padding: 20px 0px;
}
.picker{
	border-style:solid;
	font-size: 20px;
			margin: 10rpx 20rpx;
			border-color: ghostwhite;
			border-width: 8rpx;
			border-radius: 16rpx;
			padding: 20px 0px;
	
}
.c{
	height: 100rpx;
	background-color: whitesmoke;
	padding: 20rpx 0rpx;
	margin: 5rpx 10px;
	font-size: 15px;
	color: gray;
}
.xuanchuan{
	border-style:solid;
	border-color: ghostwhite;
	margin: 10rpx 20rpx;
	border-width: 8rpx;
	border-radius: 16rpx;
}
.d{	
	border-style:solid;
	border-color: ghostwhite;
	margin: 10rpx 20rpx;
	border-width: 1rpx;
	
}
.mp{
	border-color: ghostwhite;
	margin: 10rpx 20rpx;
	border-width: 8rpx;
	border-radius: 16rpx;
}
.nanyin{

	font-size: 1px;
	padding: 10rpx;
	color: gray;
}
.mp{
	background-color: whitesmoke;
}
.f{
	margin: 15px 0rpx;
	text-align: center;
}
.but{

	background-color: skyblue;
	width: 200rpx;
	height: 100rpx;
}
.final{
	border-style:solid;
	font-size: 20px;
			margin: 10rpx 20rpx;
			border-color: ghostwhite;
			border-width: 8rpx;
			border-radius: 16rpx;
			padding: 20px 0px;
	
}
.sss{
	writing-mode: vertical-lr;
	font-size: 30rpx
}
.settings-container {
  border-style:solid;
  font-size: 20px;
  		margin: 10rpx 20rpx;
  		border-color: ghostwhite;
  		border-width: 8rpx;
  		border-radius: 16rpx;
  		padding: 20px 0px;
}

.setting-item {
	font-size: 30rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e5e5e5;
}

.label {
  display: inline-block;
  width: 100rpx;
}

.radio-label {
  display: inline-block;
  margin-right: 30rpx;
}

.radius-value {
  display: inline-block;
  width: 80rpx;
}
</style>
